
<script setup>
import { ref } from "vue";
import { VueUiGauge } from "vue-data-ui";
import "vue-data-ui/style.css"

const config = ref({
  "responsive": false,
  "theme": "",
  "customPalette": [],
  "style": {
    "fontFamily": "inherit",
    "chart": {
      "backgroundColor": "#FFFFFFff",
      "color": "#1A1A1Aff",
      "animation": {
        "use": true,
        "speed": "4",
        "acceleration": 1
      },
      "layout": {
        "track": {
          "size": 1,
          "useGradient": true,
          "gradientIntensity": "4"
        },
        "markers": {
          "color": "#1a1a1aff",
          "bold": true,
          "fontSizeRatio": 1.1,
          "offsetY": 1.2,
          "roundingValue": 1
        },
        "pointer": {
          "type": "pointy",
          "size": 0.95,
          "stroke": "#1a1a1aff",
          "strokeWidth": 8,
          "useRatingColor": true,
          "color": "#ccccccff",
          "circle": {
            "radius": 10,
            "stroke": "#1a1a1aff",
            "strokeWidth": 0,
            "color": "#ffffffff"
          }
        }
      },
      "legend": {
        "fontSize": 48,
        "prefix": "",
        "suffix": "℃",
        "roundingValue": 1,
        "showPlusSymbol": false,
        "useRatingColor": true,
        "color": "#1A1A1Aff",
        "formatter": null
      },
      "title": {
        "text": "空气温度",
        "color": "#1A1A1Aff",
        "fontSize": 24,
        "bold": true,
        "textAlign": "center",
        "paddingLeft": 0,
        "paddingRight": 0,
        "subtitle": {
          "color": "#A1A1A1ff",
          "text": "",
          "fontSize": 16,
          "bold": false
        }
      }
    }
  },
  "userOptions": {
    "show": true,
    "position": "right",
    "buttons": {
      "tooltip": false,
      "pdf": true,
      "csv": false,
      "img": true,
      "table": false,
      "labels": false,
      "fullscreen": true,
      "sort": false,
      "stack": false,
      "animation": false,
      "annotator": true
    },
    "buttonTitles": {
      "open": "Open options",
      "close": "Close options",
      "pdf": "Download PDF",
      "img": "Download PNG",
      "fullscreen": "Toggle fullscreen",
      "annotator": "Toggle annotator"
    }
  },
  "translations": {
    "base": "Base"
  }
});


const dataset = ref({
  "series": [
    {
      "from": -30,
      "to": 0,
      "color": "#52b4ff",
      "id": "111"
    },
    {
      "from": 0,
      "to": 25,
      "color": "#6dd66b",
      "id": "222"
    },
    {
      "from": 25,
      "to": 40,
      "color": "#ffed29",
      "id": "56ad930e-3a0c-42bf-840b-5123f18634a0"
    },
    {
      "from": 40,
      "to": 60,
      "color": "#f06666",
      "id": "ec789112-ce95-4fa6-83ba-6c19d6c4b583"
    }
  ],
  "value": 26.207832320525725
});

</script>

<template>
  <div style="width:18vw">
    <VueUiGauge :config="config" :dataset="dataset" />
  </div>
</template>

